<template>
    <div class="header-box">
        <div class="content">
            <div class="title" style="display: flex; align-items: center;">
                <img src="../../assets/images/wicon.png" alt="" width="55" style="margin-right: 10px;">
                 数据共享服务平台
            </div>
            <div class="menu-list flex">
                <!-- <div @click="navRouter('productManage')" :class="activeIndex == 'productManage' ? 'active' : ''">产品制作</div> -->
                <!-- <div @click="navRouter('dutyInfo')" :class="activeIndex == 'dutyInfo' ? 'active' : ''">值班信息</div>
                <div @click="navRouter('userDuty')" :class="activeIndex == 'userDuty' ? 'active' : ''">我的值班</div>
                <div @click="navRouter('userManage')" :class="activeIndex == 'userManage' ? 'active' : ''">人员管理</div> -->
            </div>
            <div  class="nav nav-right">
                <!-- <el-button size="small" @click="userData">我的定制</el-button> -->
                <!-- v-if="isadmin == 1" -->
                <el-badge v-if="isadmin == 1" :value="badgeNum" :hidden="badgeNum > 0 ? false : true" :max="99" class="item" style="margin-right: 30px;">
                    <el-button  type="warning"  size="small" @click="dataManagementPath"><img src="../../../public/image/gouwu.png" alt="" width="15px"> 购物车</el-button>
                </el-badge>
                
                <el-button type="text" size="small" @click="userData('home', '首页')">首页</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="text" size="small"  v-if="isadmin == 1" @click="userData('dataManagement', '我的订阅')">我的订阅</el-button>
                <el-divider direction="vertical"  v-if="isadmin == 1" ></el-divider>
                <el-button type="text" size="small" v-if="isadmin == 1" @click="userData('userData', '订阅管理')">订阅管理</el-button>
                <el-divider direction="vertical" v-if="isadmin == 1"></el-divider>
                <el-button type="text" size="small" @click="userData('userInfo', '个人中心')">个人中心</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                    <!-- <img src="../../../public/image/touxiang.jpg" alt="" style="width: 30px; margin-right: 5px;">   -->
                    {{ userName }} <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item>修改密码</el-dropdown-item> -->
                        <el-dropdown-item command="out">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

        <el-dialog :visible.sync="dialogInfo" width="1200px" top="5%" :append-to-body="true" :before-close="handleClose" :closeOnClickModal="false">
            <div>
                <shoppingCart ref="shoppingCartRef"></shoppingCart>
            </div>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="addShoppingCart">加入购物车</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'
 import shoppingCart from '@/views/shoppingCart/index.vue'
    export default {
      name: 'headMenu',
      components:{shoppingCart},
      computed:{
         //从vuex拿数据
            ...mapState(['badgeNum', 'dialogInfo'])
        },
      data() {
        return {
            dialogVisible: false,
            routerName: '',
            menuRoute: {},
            activeIndex: "dutyManage",
            userName: "admin",
            isadmin: '2',

        }
      },
      watch:{ },
      created(){
        this.routerName = this.$route.name //获取路由名称
        this.userName = JSON.parse(sessionStorage.getItem('userinfo')).name || 'admin'
        this.isadmin = sessionStorage.getItem('isadmin') || '2'
        // this.badgeNum = this.$store.getters.badgeNum
      },
      mounted(){},
      methods: {
        dataManagementPath(){
            this.$store.commit('setDialogInfo', true)
            this.$store.commit('SetMenu', {menuname: '购物车', url: `/shoppingCart`})
            this.dialogVisible = true
            this.$nextTick(() => {
                this.$refs.shoppingCartRef.oninitData()
            })
            // this.$router.push('/shoppingCart')
        },
        // 跳转页面
        navRouter(value){
            this.activeIndex = value;
            this.$router.push(`/${value}`)
            this.routerName = value
        },
        userData(url, name){
            this.$router.push(`/${url}`)
            this.$store.commit('SetMenu', {menuname: name, url: `/${url}`})
        },
        handleCommand(value){
            if (value == 'out'){
                this.logout()
            }
        },
        // 退出
        logout(){
            this.$confirm('是否确认退出？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(res => {
                localStorage.clear()
                sessionStorage.clear()
                this.$router.replace('/login')
                // this.$http.post(`${this.$api.api}/user/exit`, params).then(res => {
                //     if (res.code == 200){
                //       this.$store.commit('setUser', {id: '', name: '', token: '', auth: ''})
                //       this.$store.commit('setToken', '')
                //       localStorage.clear()
                //       sessionStorage.clear()
                //       this.$router.replace('/login')
                //     } else {
                //         this.$message.error(res.message)
                //     }
                // }).catch((error) => {
                //     this.$message.error(error)
                // })
            }).catch(err => {})
        },
        handleClose(){
            // this.dialogVisible = false;
            this.$store.commit('setDialogInfo', false)
        }
      }
  }
</script>
<style lang="scss" scoped>
.header-box{
    display: flex;
    justify-content: center;
    height: 100%;
    // background-color: #165DFF;
    // padding: 0 20px;
    background-image: url(../../../public/image/head-bg.png);
    background-size: 100% 100%;
    // border-bottom: 1px solid #E5E7EB;
    >.content{
        width: 90%;
        height: 100%;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .title{
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 32px;
        color: #F7FBFF;
    }


   .menu-list{
        display: flex;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #F7FBFF;
        // margin-top: 30px;
        >div{
            cursor: pointer;
            padding: 10px 40px;
            margin-left: 20px;
            // background-image: url(../../../public/image/nav-bg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position-y: 8px;
            opacity: 0.9;

        }
        >div.active{
            // background-image: url(../../../public/image/nav-action.png);
            background-size: 100% 100%;
        }
    }
    .el-dropdown{
        color:#fff
    }
    .el-dropdown-link{
        display: flex;
        align-items: center;
    }
    .nav-right{
        display: flex;
        align-items: center;
        .el-button--small{
            font-size: 14px;
        }
        .el-button{
            color: #fff;
            // margin-right: 10px;
            // background: rgba(255,255,255,0.3);
        }
    }
    .nav .item{
        .el-button{
            border-radius: 4px;
       }
    }
}
::v-deep .el-dialog{
    background-color: #F7FBFF;
}
::v-deep .el-dialog__body{
    padding: 0;
}
// ::v-deep .el-dialog__header{
//   background: url("@/assets/images/pTitle.png") no-repeat;
//   background-size: 100% 100%;
// }
::v-deep .el-dialog__header{
    padding: 0;
}

</style>